<template>
    <div id="xterm" class="xterm" />
</template>

<script setup>
import 'xterm/css/xterm.css'
import { Terminal } from 'xterm'

import WSSHClient from './webssh.js'
const props = defineProps({
  options: {
    type: Object
  }
});
let client = reactive({});
let Term = reactive({});

function openTerminal(options){
  client = new WSSHClient();
  var term = new Terminal({
    cols: 97,
    rows: 37,
    cursorBlink: true, // 光标闪烁
    cursorStyle: "block", // 光标样式  null | 'block' | 'underline' | 'bar'
    scrollback: 800, //回滚
    tabStopWidth: 8, //制表宽度
    screenKeys: true,
      width:'100%',
      height:'100%',
  });
  // const term = new Terminal({
  //   fontSize: 14,
  //   cursorBlink: true,
  //   width:'100%',
  //   height:'100%',
  // });
  // const attachAddon = new AttachAddon(socket);
  // const fitAddon = new FitAddon();
  // term.loadAddon(attachAddon);
  // term.loadAddon(fitAddon);
  // term.open(document.getElementById('xterm'));
  // fitAddon.fit();

  term.focus();
  Term = term
  term.onData(function (data){
    //键盘输入时的回调函数
    client.sendClientData(data);
  })
  term.open(document.getElementById('xterm'));
  //在页面上显示连接中...
  term.write('Connecting...');
  //执行连接操作
  client.connect({
    onError: function (error) {
      //连接失败回调
      term.write('Error: ' + error + '\r\n');
    },
    onConnect: function () {
      //连接成功回调
      client.sendInitData(options);
    },
    onClose: function () {
      //连接关闭回调
      term.write("\rconnection closed");
    },
    onData: function (data) {
      //收到数据时回调
      term.write(data);
    }
  });
}
onMounted(() => {
  openTerminal( props.options);
})
onBeforeUnmount(() => {
  client.close()
  Term.dispose()
})

</script>

<style lang="scss">
</style>
